<template>
    <view class="cart-item-specs">
        <view class="item-main">
            <view class="specs" v-if="spaceItem.V_AttributeNameValue"><text>规格:</text><text class="specs-text">{{
                spaceItem.V_AttributeNameValue }}</text></view>
            <view class="price" v-if="spaceItem.IsCustomized"><text class="price-text">￥{{ spaceItem.BasePrice
            }}</text><text>/{{ spaceItem.DefaultUnit }}</text><text class="price-text">{{ spaceItem.Ratio }}{{
                        spaceItem.DefaultUnit }}</text><text>/{{ spaceItem.UnitName }}</text><text v-if="spaceItem.IsGift"
                    class="gift">【赠品】</text></view>
            <view class="price" v-else><text class="price-text">￥{{ spaceItem.V_FactPrice }}</text><text>/{{
                spaceItem.UnitName }}</text><text v-if="spaceItem.IsGift" class="gift">【赠品】</text></view>
        </view>
        <view class="item-right">
            <vk-data-input-number-box class="input-number-box" v-model="spaceItem.Amount" :min="minBuyNum || 0"
                :step="stepBuyNum || 1" :step-strictly="stepStrictly" :positive-integer="true"
                @minus="changeAmount(spaceItem.Amount, -1)" @blur="changeAmount(spaceItem.Amount, 0)"
                @plus="changeAmount(spaceItem.Amount, 1)"></vk-data-input-number-box>
        </view>
    </view>
</template>

<script>
import { updateCart } from "@/utils/cartUtil.js"
import { getUserCarList } from "@/service/api/member.js"
export default {
    props: {
        spaceItem: {
            type: Object,
            default: {},
        },
        valetUserId: {
            type: Number,
            default: 0,
        },
        warehouseId: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            stepStrictly: true,
            minBuyNum: 0,
            stepBuyNum: 1,
            maxNum: 99999999,
        }
    },
    mounted() {
        this.stepBuyNum = this.spaceItem.Ratio == 1 ? this.spaceItem.AddNum : 1
    },
    methods: {
        async changeAmount(amount, type) {
            // 更新商品数量
            let addNum = this.spaceItem.AddNum == 0 ? 1 : this.spaceItem.AddNum;
            addNum = Number(addNum)
            if (type == 0) {
                let newNum = amount
                if (newNum >= this.spaceItem.Stock && !this.getAppSet().NoCheckStock) {
                    let stockMaxNum = this.spaceItem.Stock - (this.spaceItem.Stock % addNum)
                    amount = stockMaxNum
                    this.easyToast("已是最大库存")
                } else {
                    amount = newNum
                }
                if (amount < 0) {
                    amount = 0
                }
            }
            let LimitBuy = this.spaceItem.SkuLimitBuy > 0 ? this.spaceItem.SkuLimitBuy : this.spaceItem.LimitBuy
            if (LimitBuy > 0) {
                //限购
                if (amount > LimitBuy) {
                    // amount = LimitBuy
                    this.easyToast("已达到限购数量")
                    return
                }
            }
            this.$forceUpdate()
            let carResult = await getUserCarList({ isTempCar: true });
            let param = [];
            let carData = carResult.Data || [];
            if (carData.length > 0) {
                carData.forEach((item) => {
                    param.push({
                        ProductId: item.ProductId,
                        Amount: item.Amount,
                        SkuId: item.SkuId,
                        UnitId: item.UnitId,
                        UnitName: item.UnitName,
                        Ratio: item.Ratio,
                    })
                })
            }
            console.log("amount", amount)
            let index = param.findIndex(e => e.ProductId == this.spaceItem.ProductId && e.SkuId == this.spaceItem.SkuId && e.UnitId == this.spaceItem.UnitId)
            param[index].Amount = amount
            updateCart(param, false, true, this.orderType, "", true).then((res) => { })
        }
    },
}
</script>

<style lang="scss">
.cart-item-specs {
    display: flex;
    flex-direction: row;
    // border-bottom: solid 1rpx $uni-bg-color-grey;
    padding: $app-page-padding 0;

    .item-left {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
    }

    .item-main {
        display: flex;
        flex: 1;
        flex-direction: column;
        margin-right: 20rpx;

        .specs {}
    }

    .item-right {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;

        .item-del {
            margin-bottom: 6rpx;
        }
    }

    .price-text {
        color: $color-red;
        font-size: $font-size-30;
    }
}

.gift {
    color: $app-color-main;
}
</style>
